<template>
  <div>
    <div class="main_headers">
      <div class="title">生产产能看板</div>
      <div style="width:800px">
        <!-- <NoticeText :sends-val="textData" /> -->
      </div>
      <div class="data">
        <div style="width:210px;">{{ nowDate }}</div>
        <div>{{ '周' + '日一二三四五六'.charAt(new Date().getDay()) }}</div>
      </div>
    </div>
    <div class="header">
      <div class="name">{{ listData.materialName||'' }}</div>
      <div class="product_info bgColor1">
        <div class="number">{{ listData.sumNumber||0 }}</div>
        <div class="product_number">生产计划数量</div>
      </div>
      <div class="product_info bgColor2">
        <div class="number">{{ listData.completeNumber||0 }}</div>
        <div class="product_number">生产完成数量</div>
      </div>
      <div class="product_info bgColor3">
        <div class="number">{{ listData.badnessNumber||0 }}</div>
        <div class="product_number">生产不良数量</div>
      </div>
      <div class="bgColor4">
        <el-progress :stroke-width="12" type="circle" :percentage="(listData.completeNumber/listData.sumNumber*100).toFixed(2)" />
      </div>
    </div>
    <div class="table_container">
      <el-table
        :data="tableData"
        style="width: 100%"
        :header-cell-style="{ textAlign: 'center' }"
        :cell-style="{ textAlign: 'center' }"
      >
        <el-table-column
          prop="engineeringFlowDetailName"
          label="工序"
          align="center"
        />
        <el-table-column
          prop="productNumber"
          align="center"
          label="生产数量"
        />
        <el-table-column
          prop="completeDate"
          align="center"
          label="完成日期"
        />
        <el-table-column
          label="完成情况"
          align="center"
        >
          <template slot-scope="scope">
            <el-progress :text-inside="true" :stroke-width="20" status="success" :percentage="(scope.row.completeNumber/scope.row.productNumber*100).toFixed(2)>100?100:(scope.row.completeNumber/scope.row.productNumber*100).toFixed(2)" />
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { productInfo } from '@/api/ProductionManagement/largeProductionScreen'
import { getDetail } from '@/api/engineeringManage/BOMManage'
import moment from 'moment'
export default {
  name: 'JlinkMes11Frontend6Index',

  data() {
    return {
      tableData: [],
      materialData: [],
      id: '',
      currentIndex: 0,
      timer: undefined,
      listData: {},
      nowDate: ''
    }
  },

  mounted() {
    this.getDetailInfo()
    setInterval(() => {
      this.nowDate = moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
    }, 1000)
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  methods: {
    getDetailInfo() {
      getDetail({ parentId: 0, isDelete: 0 }).then(res => {
        this.materialData = res.data
        this.getProductInfo(this.materialData[0].materialId)
        this.timer = setInterval(() => {
          if (this.currentIndex + 1 == res.data.length) {
            this.currentIndex = 0
          } else {
            this.currentIndex++
          }
          this.id = this.materialData[this.currentIndex].materialId
          this.getProductInfo(this.id)
        }, this.$store.state.common.refreshFrequency * 1000)
      })
    },
    getProductInfo(id) {
      productInfo({ materialId: id }).then(res => {
        this.listData = res.data
        this.tableData = res.data.listVos
        console.log(res)
      })
    }
  }
}
</script>

<style lang="less" scoped>
.header{
    padding: 20px 40px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    // align-items: center;
    .name{
        margin-right: 40px;
        font-size: 60px;
        padding: 20px 30px;
        background: rgb(230, 230, 230);
        border-radius: 8px;
        width: 400px;
        line-height: 110px;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .product_info{
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        text-align: center;
        padding: 17px 50px;
        border-radius: 8px;
        margin-right: 40px;
        .number{
            font-size: 45px;
        }
        .product_number{
            font-size: 20px;
        }

    }
}
.bgColor1{
  background: rgb(152, 176, 184);
}
.bgColor2{
  background: rgb(0, 191, 0);
  color: white;
}
.bgColor3{
  background: rgb(252, 172, 157);
}
.bgColor4{
  background: rgb(201, 255, 188);
  padding: 10px 40px;
  border-radius: 8px;
}
/deep/ .el-progress-bar__innerText{
    // color: black !important;
    font-size:3px !important ;
}
.table_container{
    margin: 0 40px;
}
  /deep/  .progressBar .el-progress-bar__inner {
  background-color: #fff;
}
  .main_headers {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    padding: 13px 30px;
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    .title {
      font-family: AlibabaPuHuiTi_2_95_ExtraBold;
      font-size: 24px;
      font-weight: 800;
      color: #333333;
      max-width: 400px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .data {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      font-family: AlibabaPuHuiTi_2_55_Regular;
      font-size: 20px;
      font-weight: normal;
      color: #666666;
    }
  }
</style>
